import * as ImagePicker from 'expo-image-picker';
import React, { useState } from 'react';
import {
    Image,
    ScrollView,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from 'react-native';

export default function AddServiceScreen() {
  const [name, setName] = useState<string>('');
  const [duration, setDuration] = useState<string>('');
  const [originalPrice, setOriginalPrice] = useState<string>('');
  const [discountPrice, setDiscountPrice] = useState<string>('');
  const [image, setImage] = useState<string>('');

  // 选择图片
  const pickImage = async () => {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      alert('请允许访问相册权限');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: 'images',
      allowsEditing: true,
      quality: 0.8,
    });

    if (!result.canceled) {
      setImage(result.assets[0].uri);
    }
  };

  const handleSubmit = () => {
    if (!name || !duration || !originalPrice || !discountPrice) {
      alert('请填写完整信息');
      return;
    }

    const newService = {
      name,
      duration,
      originalPrice,
      discountPrice,
      image,
    };

    console.log('新增服务：', newService);
    alert('服务已添加！');
    // navigation.goBack();
  };

  return (
    <ScrollView style={styles.container} contentContainerStyle={{ paddingBottom: 50 }}>
      <View style={styles.card}>
        <Text style={styles.sectionTitle}>服务信息</Text>

        <View style={styles.field}>
          <Text style={styles.label}>服务名称</Text>
          <TextInput
            style={styles.input}
            placeholder="请输入服务名称"
            value={name}
            onChangeText={setName}
            placeholderTextColor="#aaa"
          />
        </View>

        <View style={styles.field}>
          <Text style={styles.label}>服务时长（分钟）</Text>
          <TextInput
            style={styles.input}
            placeholder="请输入时长"
            value={duration}
            onChangeText={setDuration}
            keyboardType="numeric"
            placeholderTextColor="#aaa"
          />
        </View>

        <View style={styles.fieldRow}>
          <View style={{ flex: 1, marginRight: 8 }}>
            <Text style={styles.label}>原价（元）</Text>
            <TextInput
              style={styles.input}
              placeholder="原价"
              value={originalPrice}
              onChangeText={setOriginalPrice}
              keyboardType="numeric"
              placeholderTextColor="#aaa"
            />
          </View>
          <View style={{ flex: 1, marginLeft: 8 }}>
            <Text style={styles.label}>现价（元）</Text>
            <TextInput
              style={styles.input}
              placeholder="现价"
              value={discountPrice}
              onChangeText={setDiscountPrice}
              keyboardType="numeric"
              placeholderTextColor="#aaa"
            />
          </View>
        </View>

        <View style={styles.field}>
          <Text style={styles.label}>服务图片</Text>
          <TouchableOpacity style={styles.imagePicker} onPress={pickImage}>
            {image ? (
              <Image source={{ uri: image }} style={styles.imagePreview} />
            ) : (
              <Text style={{ color: '#888' }}>点击选择图片</Text>
            )}
          </TouchableOpacity>
        </View>

        <TouchableOpacity style={styles.submitButton} onPress={handleSubmit}>
          <Text style={styles.submitText}>提交</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F7FA',
  },
  card: {
    backgroundColor: '#fff',
    margin: 16,
    padding: 20,
    borderRadius: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 6,
    elevation: 3,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#333',
    marginBottom: 16,
  },
  field: {
    marginBottom: 16,
  },
  fieldRow: {
    flexDirection: 'row',
    marginBottom: 16,
  },
  label: {
    fontSize: 14,
    color: '#555',
    marginBottom: 6,
    fontWeight: '500',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 15,
    color: '#333',
    backgroundColor: '#FAFAFA',
  },
  imagePicker: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 12,
    height: 160,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FAFAFA',
  },
  imagePreview: {
    width: '100%',
    height: '100%',
    borderRadius: 12,
  },
  submitButton: {
    backgroundColor: '#4A90E2',
    paddingVertical: 14,
    borderRadius: 12,
    alignItems: 'center',
    marginTop: 10,
    shadowColor: '#4A90E2',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.4,
    shadowRadius: 4,
    elevation: 3,
  },
  submitText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '700',
  },
});